<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
	        margin: 0;
	        padding: 0;
	        list-style: none;
        }

        .box {
	        width: 1200px;
	        height: 375px;
	        position: relative;
            top: 100px;
            margin: auto;
        }

        .slideshow {
	        width: 1200px;
	        height: 375px;
	        position: relative;
        }

        .pic {
	        width: 100%;
	        height: 100%;
	        list-style: none;
	        position: absolute;
        }

        .pic.active {
	        z-index: 20;
        /**设置元素的层级，这样显示的图片为第一张*/
        }

        .btn {
	        width: 50px;
	        height: 80px;
	        position: absolute;
	        top: 150px;
	        opacity: 0.4;
	        z-index: 30;
	        font-size: 50px;
        }

        #goLast {
	        left: 1px;
        }

        #goNext {
	        right: 1px;
        }
        
    </style>
</head>
<body>
    <div class="box" id="box">
        <!-- 图片 -->
         <ul class="slideshow">
            <li class="pic active">
                <img src="img/01.jpg" alt="">
            </li>
            <li class="pic">
                <img src="img/02.jpg" alt="">
            </li>
            <li class="pic">
                <img src="img/03.jpg" alt="">
            </li>
            <li class="pic">
                <img src="img/04.jpg" alt="">
            </li>
            <li class="pic">
                <img src="img/05.jpg" alt="">
            </li>
        </ul>

        <!--点击上下张图片按钮-->
        <button type="button" class="btn" id="goLast"><</button>
        <button type="button" class="btn" id="goNext">></button>

    </div>
</body>

<script>
    //获取li、button元素
    var pics = document.getElementsByClassName("pic");
    var goLastBtn = document.getElementById("goLast");
    var goNextBtn = document.getElementById("goNext");

    var time = 0;//定时器时间跳转参数

    //设置元素的索引值
    var index = 0;  //index = 0为第一张图片

    //清理掉active这个类
    var clearActive = function() { 
       for (var i = 0;i < pics.length;i++) { //遍历li中的每一张图片
            pics[i].className = "pic"; 
        }
    }

    var goIndex = function() { 
        clearActive(); //调用clearActive（），把全部的active类名都删掉
        pics[index].className = "pic active"; //给想要展示的第index张图片加上active这个类名
    }

    //goNext事件和goLast事件
    var goNext = function() { 
        if(index < 4) {
            index ++;
        } else {
            index = 0; 
        }
        goIndex();
    }

    var goLast = function() {
        if(index == 0) {
            index = 4; 
        } else {
            index --;
        }
        goIndex();
    }

    goNextBtn.onclick=goNext;
    goLastBtn.onclick=goLast; 

    //定时器（自动播放）
    setInterval(function() { 
        time ++;
        if(time == 50) {  //间隔时间为5s
            goNext();
            time = 0; 
        }
         },100)

</script>

</html>